import { useState, useEffect } from 'react';
import { Space, Tag, Pagination } from 'antd';
import { getNews } from '../../api/news';

const { CheckableTag } = Tag;

const tagsData = [
    { label: '综合新闻', id: '' },
    { label: '新闻2', id: '2' },
    { label: '新闻3', id: '3' },
    { label: '新闻4', id: '4' },
    { label: '新闻5', id: '5' },
]
const App = () => {
    const [selectedTags, setSelectedTags] = useState('');
    const [news, setNews] = useState([]);
    // const [total, setTotal] = useState(0);
    const [page, setPage] = useState(1);

    useEffect(() => {
        getNews({ page: page, newsType: selectedTags })
            .then(res => {
                setNews(res.data);
                // setTotal(res.data.totalElements);
            })
    }, [selectedTags, page])

    const handleChange = (tag) => {
        setPage(1);
        setSelectedTags(tag.id);
    };
    const pageChange = (page) => {
        setPage(page)
    }
    return (
        <>
            <Space size={[0, 8]} wrap>
                {tagsData.map((tag) => (
                    <CheckableTag
                        key={tag.id}
                        checked={selectedTags == tag.id}
                        onChange={() => handleChange(tag)}
                    >
                        {tag.label}
                    </CheckableTag>
                ))}
            </Space>
            <ul>
                {/* {
                    news.content?.map(item => {
                        return <li key={item.id}>{item.newsTitle}</li>
                    })
                } */}
            </ul>
            <Pagination onChange={pageChange} current={page} total={news.totalElements} />
        </>
    );
};
export default App;